<template>
  <div id="home">
    <el-carousel trigger="click" height="350px">
      <el-carousel-item
        v-for="item in articles"
        :key="item._id"
        @click.native="toDetail(item._id)"
      >
        <div class="img">
          <el-image
            :src="item.titlePicture"
            style="object-fit: cover"
          ></el-image>
        </div>
        <div class="about">
          <h2>{{ item.title }}</h2>
          <el-tag type="info" v-for="(item1, i) in item.tags" :key="i">{{
            item1.name
          }}</el-tag>
          <div class="time">
            <span>createAt:{{ item.createTime | date }}</span>
            <span>updateAt:{{ item.updateTime | date }}</span>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <article-list :articles="articles"></article-list>

    <!--  -->
    <el-pagination
      background
      @current-change="changePage"
      :current-page="page"
      :page-size="5"
      layout="total, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import dayjs from "dayjs";
import ArticleList from 'views/home/ArticleList.vue'
export default {
  name:'Home',
  components:{
    ArticleList
  },
  data() {
    return {
      articles: [],
      page: 1,
      total: 0,
    };
  },
  filters: {
    date(val) {
      return dayjs(val).format("YYYY/MM/DD");
    },
  },
  methods: {
    async getArticleList() {
      const res = await this.$http.get("articles", {
        params: { page: this.page },
      });
      console.log(res);
      this.total = res.data.pop();
      this.articles = res.data;
      console.log(res.data)
    },
    changePage(newpage) {
      this.page = newpage;
      console.log(this.page);
      this.getArticleList();
    },
    toDetail(id) {
            // this.$router.push('/articleInfo/'+id)
            this.$router.push(`/articleInfo/${id}`)
     },
  },
  created() {
    this.getArticleList();
  },
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  #home {
    margin:0 0 20px 0;
    padding:0 0 20px 0;
    background-color: #fff;
    .el-carousel {
      width: 100%;
      .el-carousel__item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .img {
          width: 35%;
          .el-image {
            height: 400px;
            // width: 900px;
            width: 175%;
          }
        }
        .about {
          // width: 500px;
          width: 30%;
          // margin-right: 100px;
          // margin-right:3%;
          .el-tag {
            margin-left: 15px;
          }
          .time {
            margin-top: 20px;
          }
          .time span:nth-child(2) {
            padding-left: 15px;
          }
        }
      }
    }
    
    .el-pagination {
      width: 90%;
      text-align: center;
      margin-top: 50px;
    }
  }
}

@media screen and (max-width: 768px) {
  #home {
    width: 100%;
    overflow: hidden;
    margin:20px auto;
    padding:0 0 10px 0;
    background-color: #fff;
    .el-carousel {
      ::v-deep .el-carousel__container{
         height: 200px !important;
      }
      ::v-deep .el-carousel__indicator{
        width: 35px;
      }
      .el-carousel__item {
        .img {
          .el-image {
            width: 100%;
          }
        }
        .about {
          width: 70%;
          margin: 0 auto;
          display: none;
          h1 {
            font-size: 18px;
          }
          .el-tag {
            margin-left: 15px;
          }
          .time {
            margin-top: 10px;
          }
          .time span:nth-child(2) {
            padding-left: 10px;
          }
        }
      }
    }

    .el-pagination {
      text-align: center;
      margin-top: 20px;
    }
  }
}
</style>
